<template>
  <div>
<div>
  <el-select
    v-model="max"
    class="m-2"
    placeholder="请选择图片数量"
    size="large"
    style="width: 240px"
  >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
</div>
<el-button type="primary" size="default" @click="formVisble=true">新增轮播图片</el-button>

   <div>
  <el-table
    :data="tableData"
    style="width: 100%"
    @select="selectCheckbox"
    @selection-change="sel"
  >
    <el-table-column type="selection"   width="55" :selectable="check">

  </el-table-column>
    <el-table-column prop="date"   label="Date" width="120">
    </el-table-column>
    <el-table-column label="图片" width="180" >
    <template #default="{row}">
        <div style="display: flex; align-items: center">
            <el-image :src="row.photourl" />
        </div>
    </template>
</el-table-column>
    <el-table-column prop="id" label="Name" width="120" />
    <el-table-column prop="address" label="Address" />
    <el-table-column label="操作" >
      <template #default="scope">
        <el-button link type="primary" size="small" @click="remove(scope.$index)" >删除</el-button>
        <!-- <el-button link type="primary" size="small" @click="handleEdit(scope.$index)">编辑</el-button> -->
      </template>
    </el-table-column>
  </el-table>
  </div>
  <el-dialog v-model="formVisble" title="商品信息">
    <el-form :model="form">
      <el-form-item label="商品图片" :label-width="formLabelWidth" v-model="form.photourl">
     <input type="file" name="" id=""  >
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="formVisble = false">取消</el-button>
        <el-button type="primary" @click="confirm">确定</el-button>
      </span>
    </template>
  </el-dialog>
  </div>
</template>

<script>
import { ref } from 'vue'
// import { ElTable } from 'element-plus'
import axios from '@/utils/request';
export default {
name:'LunBo',
data() {
  return {
    formVisble:false,
flag:ref(0),
form:{
  photourl:''
},
    tableData:[

  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    checked:false,
    img:require('@/assets/ganyu.jpg')
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    img:require('@/assets/yuan.jpg'),
    checked:false,
    
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    checked:false,

  },
  {
    date: '2016-05-08',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    checked:false,
   


  },
  {
    date: '2016-05-06',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    checked:false,

  },
  {
    date: '2016-05-07',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    checked:false,

  },
],
    max:'1',
    options:[
    {
        value:2,
        label:2
      },
      {
        value:3,
        label:3
      },
      {
        value:4,
        label:4
      },
      {
        value:5,
        label:5
      },
      {
        value:6,
        label:6
      },
      {
        value:7,
        label:7,
      },
      {
        value:8,
        label:8
      },
    ],
    img:[
      { address:'1',
        photo:require('@/assets/ganyu.jpg')},
      { address:'1',
        photo:require('@/assets/ganyu.jpg')},
      { address:'1',
        photo:require('@/assets/ganyu.jpg')},
      { address:'1',
        photo:require('@/assets/ganyu.jpg')},
      { address:'1',
        photo:require('@/assets/ganyu.jpg')},
      { address:'1',
        photo:require('@/assets/ganyu.jpg')},
      { address:'1',
        photo:require('@/assets/ganyu.jpg')},
      { address:'1',
        photo:require('@/assets/ganyu.jpg')},
    
    ],
     checkedindex : ref([]),
  }},
  methods: {
    check(row){
       if(this.flag>=this.max)
       {
        if(row.checked)
        {
          return true
        }
        else{
          return false
        }
       }
       else{
        return true
       }
    },
    selectCheckbox(seletion,row){
      seletion[0].checked=!seletion[0].checked
      console.log(seletion);
      console.log(row);
    },
    sel(selection){
      console.log(selection.length);
      this.flag=selection.length
      console.log(selection);
    },
    getall(){
      axios.get('/ser_roll/selall').then(res=>{
        this.tableData=res.data
      })
    },
    confirm(){
      const params={
        photourl:this.form.photourl
    }
    axios.post('/ser_roll/insert',JSON.stringify(params))
    this.form={}
    this.formVisble=false
    },
    remove(index){
      const parmas={
      id:this.tableData[index].id
    }
    axios.post('/ser_roll/delete',JSON.stringify(parmas)).then(res=>{
console.log(res);
    })
    this.tableData.splice(index,1)
    }
},
mounted(){
  this.getall()
}
}
</script>

<style>

</style>

